@import '../stakingConfig';

.component {
  background: transparent;
  display: flex;
  padding: 20px 0 0;
  position: initial;
  transition: position 1s ease-out, top 1s ease-out;
  width: 100%;
}

.container {
  flex: 1 1 auto;
  position: relative;
}

.searchIcon {
  bottom: 12.5px;
  color: var(--theme-staking-stake-pools-search-icon-color);
  left: 20px;
  position: absolute;
  z-index: 1;

  svg {
    opacity: 0.3;
    width: 15px;

    g > g {
      fill: var(--theme-staking-stake-pools-search-icon-color);
    }
  }
}

.searchIconFocus {
  svg {
    opacity: 0.7;
  }
}

.searchInput {
  input {
    border-radius: 4px;
    height: 50px;
    padding: 0 68px 0 45px;
  }

  &.inputExtrasSearch {
    input {
      padding-right: 160px;
    }

    &.withGridRewardsView input {
      padding-right: 193px;
    }
  }
}

.inputExtras {
  bottom: 0.5px;
  display: flex;
  height: 48px;
  line-height: 48px;
  position: absolute;
  right: 11px;
}

.clearSearchButton {
  background-color: var(
    --theme-staking-stake-pools-search-clear-button-background-color
  );
  border-radius: 3px;
  cursor: pointer;
  height: 28px;
  position: relative;
  top: -2px;
  width: 28px;

  &:hover {
    background-color: var(
      --theme-staking-stake-pools-search-clear-button-hover-background-color
    );
  }
}

.clearSearchIcon {
  > svg {
    position: relative;
    top: 0.5px;
    width: 10px;

    > g > g {
      fill: var(--theme-staking-stake-pools-search-clear-button-color);
    }
  }
}

.viewButtons {
  @extend %contentBorderAndBackground;
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: space-between;
  line-height: 48px;
  margin-left: 10px;
  padding: 0 20px;
  width: auto;

  & > span {
    display: flex;
    margin-right: 15px;

    &:last-child {
      margin-right: 0;
    }
  }

  button {
    border-radius: 3px;
    color: var(--theme-about-window-icon-close-button-color);
    cursor: pointer;
    height: 15px;
    width: 15px;

    &:hover {
      svg {
        > g > g {
          opacity: 0.7;
        }
      }
    }

    svg {
      position: relative;
      top: 1px;
      width: 18px;

      > g > g {
        fill: var(--theme-staking-stake-pools-search-clear-button-color);
        opacity: 0.3;
      }
    }
  }

  .selected {
    &:hover {
      background-color: transparent;
    }

    svg {
      > g > g {
        opacity: 1;
      }
    }
  }

  .gridView {
    svg {
      width: 15px !important;
    }
  }

  .gridRewardsView {
    svg {
      width: 15px !important;
    }
  }
}
